<template>
<div>
    <el-row>
        <el-col :span="6" style="height:450px;;border:1px solid black;background:#fff">

        <el-select v-model="value" placeholder="请选择" style="margin:20px 0 0 20px;">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>

            <el-tree
                :data="data"

                show-checkbox
                node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]"
                :props="defaultProps">
            </el-tree>
            <div @click="amend=true" style="margin-left:10px;margin-top:30px;">
                <el-button type="text" class="el-icon-circle-plus">添加一级菜单</el-button>
            </div>
        </el-col>
        <el-col :span="17" >
            <div style="background:#fff;width:80%;height:450px;;border:1px solid black">
            </div>
        </el-col>
    </el-row>
<div>
</div>
    <div  style="margin-left:10px;margin-top:20px;">
        <el-button type="primary" @click="save1()">保存配置</el-button>
    </div>

  <!--修改-->
   <el-dialog
  title="新建菜单节点"
  :visible.sync="amend"
  width="30%">
    <el-form ref="form" v-model="form" label-width="100px">
      <el-form-item label="父节点：">
            系统配置
      </el-form-item>
      <el-form-item label="功能名称：">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="功能URL：">
        <el-input v-model="form.region"></el-input>
      </el-form-item>

      <el-form-item label="使用状态">
        <el-radio v-model="radio" label="1">启用</el-radio>
        <el-radio v-model="radio" label="2">停用</el-radio>
      </el-form-item>
    </el-form>


    <span slot="footer" class="dialog-footer">
      <el-button  @click="save()">保 存</el-button>
      <el-button type="primary" @click="amend = false">返 回</el-button>
    </span>
</el-dialog>

</div>
</template>
<script>
  export default {
    data() {
      return {
            options: [{
          value: '选项1',
          label: '系统管理员'
        }, {
          value: '选项2',
          label: '线路管理员'
        }, {
          value: '选项3',
          label: '巡检员'
        }, {
          value: '选项4',
          label: '消缺员'
        }],
        value: '',
        amend:false,
        radio:1,

        form:[{
            name:'',
            region:''
        }],
        data: [
            {
                id: 1,
                label: '系统管理',
                children: [{
                    id: 11,
                    label: '角色管理'
                },
                {
                    id: 12,
                    label: '用户管理'
                },
                {
                    id: 13,
                    label: '角色权限配置'
                },
                {
                    id: 14,
                    label: '系统配置'
                }]
            },
            {
                id: 2,
                label: '杆塔管理',
            },
            {
                id: 3,
                label: '线路管理',
            },
            {
                id: 4,
                label: '缺陷管理',
                children: [{
                    id: 41,
                    label: '缺陷类型设置'
                },
                {
                    id: 42,
                    label: '缺陷等级确认'
                }]
            },
            {
                id: 5,
                label: '缺陷管理',
                children: [{
                    id: 41,
                    label: '缺陷类型设置'
                },
                {
                    id: 42,
                    label: '缺陷等级确认'
                }]
            },],




        defaultProps: {
          children: 'children',
          label: 'label'
        }

      }
    },
    methods:{
        save1(){

           this.$message({
          message: '保存成功',
          type: 'success'
        });
        },
        open(){
            this.amend=true;

        },

        save(){
          console.log(this.form);
            this.amend=false;
            
              this.$message({
          message: '保存成功',
          type: 'success'
        });
        }
    }
  }
</script>
